<template>
    <div class="container">
        <div class="closeBtn">
            <span class="iconfont iconicon-test" @click="$router.back('login')"></span>
        </div>

        <div class="logo">
            <span class="iconfont iconnew"></span>
        </div>

        <div class="userName">
            <authInput 
                type="text"
                placeholder="请输入手机号"
                rule="^\d{4,16}$"
                err_message= "请输入正确的手机号"
                @input="setUserName"
            ></authInput>
        </div>

        <div class="nickName">
            <authInput 
                type="text"
                placeholder="请输入昵称"
                rule="^\w{4,16}$"
                err_message= "请输入正确昵称"
                @input="setNickName"
            ></authInput>
        </div>

        <div class="userPwd">
            <authInput 
                type="password"
                placeholder="请输入密码"
                rule="^\d{3,16}$"
                err_message= "请输入正确密码"
                @input="setUserPwd"
            ></authInput>
        </div>
        <div class="btn">
            <authBtn text="注册" @send="sendRegister"></authBtn>
        </div>
    </div>
</template>

<script>
import authInput from '../components/authInput';
import authBtn from '../components/authBtn';

export default {
    components: {
        authInput: authInput,
        authBtn:authBtn
    },
    data() {
        return {
            username: "",
            password: "",
            nickname: ""
        }
    },
    methods:{
        setUserName(name) {
            this.username = name;
        },
        setNickName(name) {
            this.nickname = name;
        },
        setUserPwd(pwd) {
            this.password = pwd;
        },
        sendRegister(){
            this.$axios({
                url:'/register',
                method:'post',
                data:{
                    username:this.username,
                    password:this.password,
                    nickname:this.nickname
                }
            }).then(res=>{
                if(!res.data.statusCode){
                    this.$toast.success(res.data.message)
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .container {
        padding: 0 5.556vw;
    }
    .closeBtn{
        padding-top: 20px;
        .iconfont {
            font-size: 7.5vw;
        }
    }

    .logo{
        display: flex;
        justify-content: center;
        .iconfont {
            font-size: 35vw;
            color: #d81e06;
        }
    }
    .btn{
        margin-top: 20.556vw;
    }
</style>